<template>
  <el-tabs type="border-card" tab-position="left">
    <el-tab-pane label="全部">
      <span
        @click="init()"
        class="_abs _abs-rt _font-reminder _font-mini"
        style="right: 15px; top: 5px"
        >刷新</span
      >
      <div
        class="_wrapper _flex _p10 _flex-a-stretch _rel _flex-start _flex-space-10"
      >
        <template v-for="item in types" :key="item.val">
          <div class="_cart _wrapper-y _box-x-50b">
            <div class="_font-title _text-a-c _background-4 _p5">
              {{ item.name }}
            </div>
            <div
              v-for="item in contents.filter((fil) => fil.status == item.val)"
              :key="item.id"
            >
              <com-drag :data="item" class="_flex _p5 _background-3">
                <div
                  class="_ellipsis _font-reminder _font-mini"
                  @click="
                    $comStore.comWin.openWin(
                      {
                        name: item.title,
                        code: 'ToolVditor',
                        full: false,
                      },
                      item
                    )
                  "
                >
                  {{ item.title || "未设定名称" }}
                </div>
                <div class="_font _text-a-r _font-mini">
                  {{ $dayjs(item.created_date).format("YYYY-MM-DD HH:mm") }}
                </div>
              </com-drag>
            </div>
            <com-drag-over :defaultData="{ status: item.val }" @comDrop="drag">
              <div
                class="_font _text-a-c _font-reminder _p10"
                @click="
                  $comStore.comWin.openWin(
                    {
                      name: '新增任务',
                      code: 'ToolVditor',
                      full: false,
                    },
                    {
                      type: '1',
                    }
                  )
                "
              >
                +新增
              </div>
            </com-drag-over>
          </div>
        </template>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ToolAction from "@/tool/http/tool-action.js";
import ComDrag from "@/components/com-drag/com-drag.vue";
import ComDragOver from "@/components/com-drag/com-drag-over.vue";

const accountContentAction = ToolAction.init("account_content");
export default {
  components: { ComDrag, ComDragOver },
  data() {
    return {
      types: [
        { name: "待办", val: 1 },
        { name: "已办", val: 2 },
        { name: "挂起", val: 4 },
        { name: "废弃", val: 3 },
      ],
      contents: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    drag(item) {
      item.data.status = item.defaultData.status;
      accountContentAction.sync(item.data).then((res) => {
        this.init();
      });
    },
    init() {
      accountContentAction
        .list({
          dataLevel: "DATA_LEVEL_ONLY_MY",
          rules: {
            status__in: "1,2,3,4",
            type__eq: "1",
          },
        })
        .then((res) => {
          this.contents = res;
        });
    },
  },
};
</script>

<style scoped></style>
